<template>
  <section>
    <van-sticky>
      <PageHeader title="会员卡卡号管理"/>
    </van-sticky>

    <div class="flex flex-row flex-center pd10">
      <div class="flex flex-row flex-center flex-1 pr5">
        <van-button type="primary" round block @click="onGenerateClick">+生成卡号</van-button>
      </div>
      <div class="flex flex-row flex-center flex-1 pl5">
        <van-button type="primary" round block @click="onExportClick">导出未领卡号</van-button>
      </div>
    </div>

    <van-list
      class="mt10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestList">
      <div class="flex flex-col bg-color-white mb10 font-common"
           v-for="(item, index) in dataList"
           :key="index">
        <div class="flex flex-row flex-left flex-centerV pd10 font-big strong">
          <div class="flex flex-row flex-left flex-1">卡号：{{item.no}}</div>
          <div class="flex flex-row flex-right flex-1">密码：{{item.password}}</div>
        </div>
        <div class="flex flex-row flex-left pd10">会员卡：{{item.vip_card.name}}</div>
        <template v-if="item.owner_uid > 0">
          <div class="flex flex-row flex-left flex-centerV pd10">
            <img :src="item.owner.avatar_url ? item.owner.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="user-avatar" />
            <span class="ml5">领取人：{{item.owner.nick}}</span>
          </div>
          <div class="flex flex-row flex-left pd10">激活时间：{{item.active_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
        </template>
      </div>
    </van-list>

    <van-dialog v-model="generateFormVisible" title="生成卡号" show-cancel-button @confirm="onGenerateFormConfirm">
      <form action="/">
        <van-field
          v-model="generateAmount"
          name=""
          label="数量"
          placeholder="请输入数量"
          type="digit"
        />
      </form>
    </van-dialog>
  </section>
</template>

<script>
import PageHeader from "../../componets/PageHeader";
import {BASE_STATIC_URL, vipCardNoExportUri, vipCardNoGenerateUri, vipCardNoListsUri} from "../../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      BASE_STATIC_URL: BASE_STATIC_URL,

      vipCardId: 0,

      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],

      generateFormVisible: false,
      generateAmount: 100
    }
  },
  methods: {
    onGenerateClick() {
      this.generateAmount = 100;
      this.generateFormVisible = true;
    },
    onExportClick() {
      const url = vipCardNoExportUri + '?access_token='+this.GLOBAL.userInfo.access_token+'&vip_card_id=' + this.$route.params.vip_card_id;
      window.open(url);
    },
    onGenerateFormConfirm() {
      this.generateFormVisible = false;

      const that = this;
      let url = vipCardNoGenerateUri + '?amount=' + that.generateAmount + '&vip_card_id=' + this.$route.params.vip_card_id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          that.currentPage = 1;
          that.lastPage = 0;
          that.total = 0;
          that.loading = false;
          that.finished = false;
          that.dataList = [];
          that.toast.success('生成成功');
        }
      }, response => {
        // error callback
      })
    },
    requestList() {
      const that = this;
      this.loading = true;
      let url = vipCardNoListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage + '&vip_card_id=' + this.$route.params.vip_card_id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    },
  },
  mounted: function () {
    this.vipCardId = this.$route.params.vip_card_id;
  }
}
</script>

<style scoped>
  .user-avatar {
    height: 30px;
    width: 30px;
    border-radius: 15px;
  }
</style>
